---
title: Badge
description: Shows a badge or a badge-like component.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/badge?raw';

<LinkButton href="https://rn-primitives.vercel.app/types">
  Types Primitives
</LinkButton>
<LinkButton href="https://rn-primitives.vercel.app/slot">
  Slot Primitives
</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/badge">
  Demo
</LinkButton>

<br />

Shows a badge or a badge-like component.

## Installation
<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add badge
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependencies">
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/slot' className='text-white font-bold'> slot primitive</a> and the <a href='/components/text' className='text-white font-bold'>text component</a> to your project.
    </Aside>


    **Copy/paste the following code to `~/components/ui/badge.tsx`**

    <Code code={importedCode} lang="tsx" title="~/components/ui/badge.tsx" />
  </TabItem>
</Tabs>
## Usage

```tsx
import { Badge } from '~/components/ui/badge';
import { Text } from '~/components/ui/text';

function Example() {
  return (
      <Badge>
        <Text>Default</Text>
      </Badge>
  );
}
```

## Props

### Badge

Extends [`View`](https://reactnative.dev/docs/view#props) props

| Prop  |  Type  |             Note             |
| :---: | :----: | :--------------------------: |
| asChild | boolean | _(optional)_ |
| variant | 'default' \| 'secondary' \| 'destructive' \| 'outline' | _(optional)_ |
        